import React, { useState } from 'react';
import { Table, Button, Modal, message } from 'antd';
import moment from 'moment';
import { Link } from 'react-router-dom';

// 模拟借阅记录数据，添加书籍图片 URL
const borrowRecords = [
  {
    key: '1',
    bookTitle: '示例图书 1',
    borrowDate: '2024-01-01',
    dueDate: '2024-01-15',
    renewed: false,
    bookImage: '/book_img/1.png' // 替换为实际图片 URL
  },
  {
    key: '2',
    bookTitle: '示例图书 2',
    borrowDate: '2023-12-20',
    dueDate: '2024-01-05',
    renewed: true,
    bookImage: '/book_img/2.png' // 替换为实际图片 URL
  },
];

const BorrowRecord = () => {
  const [isRenewModalVisible, setIsRenewModalVisible] = useState(false);
  const [selectedRecord, setSelectedRecord] = useState(null);

  // 续借功能
  const handleRenew = (record) => {
    setSelectedRecord(record);
    setIsRenewModalVisible(true);
  };

  const confirmRenew = () => {
    if (selectedRecord) {
      // 模拟续借逻辑，延长应还时间 15 天
      const newDueDate = moment(selectedRecord.dueDate).add(15, 'days').format('YYYY-MM-DD');
      // 这里可以添加更新数据到后端的逻辑
      message.success(`《${selectedRecord.bookTitle}》续借成功，新的应还时间为 ${newDueDate}`);
    }
    setIsRenewModalVisible(false);
  };

  // 逾期罚款计算
  const calculateFine = (dueDate) => {
    const today = moment();
    const due = moment(dueDate);
    if (today.isAfter(due)) {
      const overdueDays = today.diff(due, 'days');
      // 假设每天罚款 1 元
      return overdueDays * 1;
    }
    return 0;
  };

  // 电子收据下载
  const handleDownloadReceipt = (record) => {
    // 这里可以添加生成并下载电子收据的逻辑
    message.info(`正在下载《${record.bookTitle}》的电子收据`);
  };

  const columns = [
    {
      title: '图书图片',
      key: 'bookImage',
      render: (_, record) => (
        <Link to={`/book/${record.key}`}>
          <img src={record.bookImage} alt={record.bookTitle} style={{ width: 50, height: 70,objectFit: 'cover' }} />
        </Link>
      ),
    },
    {
      title: '图书标题',
      dataIndex: 'bookTitle',
      key: 'bookTitle',
      render: (text, record) => (
        <Link to={`/book/${record.key}`}>{text}</Link>
      ),
    },
    {
      title: '借阅时间',
      dataIndex: 'borrowDate',
      key: 'borrowDate',
    },
    {
      title: '应还时间',
      dataIndex: 'dueDate',
      key: 'dueDate',
    },
    {
      title: '续借状态',
      dataIndex: 'renewed',
      key: 'renewed',
      render: (renewed) => (renewed ? '已续借' : '未续借'),
    },
    {
      title: '逾期罚款',
      key: 'fine',
      render: (_, record) => calculateFine(record.dueDate),
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <span>
          <Button onClick={() => handleRenew(record)} disabled={record.renewed}>
            续借
          </Button>
          <Button onClick={() => handleDownloadReceipt(record)} style={{ marginLeft: 8 }}>
            下载收据
          </Button>
        </span>
      ),
    },
  ];
  

  return (
    <div>
      <Table columns={columns} dataSource={borrowRecords} />
      <Modal
        title="确认续借"
        visible={isRenewModalVisible}
        onOk={confirmRenew}
        onCancel={() => setIsRenewModalVisible(false)}
        buttonPlacement="horizontal" 
        okButtonProps={{
          style: {
            backgroundColor: '#ff4d4f',
            borderColor: '#ff4d4f',
            color: 'white',
            width: '100px',
            height: '40px',
            // 可以添加更多样式属性
          }
        }}
          // 调整取消按钮样式
          cancelButtonProps={{
          style: {
            backgroundColor: '#ff4d4f',
            borderColor: '#d9d9d9',
            color: 'white',
            width: '100px',
            height: '40px',
            // 可以添加更多样式属性
          }
        }}
      >
        {selectedRecord && (
          <p>确认续借《{selectedRecord.bookTitle}》吗？</p>
        )}
      </Modal>
    </div>
  );
};

export default BorrowRecord;